<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div>one</div>
    <div id="two">two</div>
    <div id="three">three</div>
    <script>
        /**
         * 以下方法都是由父元素节点调用
         *  appendChild 参数:新的节点  给父节点追加一个子节点 
         *  insertBefore 参数：插入的节点 参考节点 在某一个节点前插入一个节点
         *  removeChild 参数：要删除的节点 从当前父节点中删除一个节点
         *  replaceChild 参数：新节点 旧节点 将旧节点使用新节点替换  
        */

        // createElement方法 创建元素节点
        var four = document.createElement('div');
        four.textContent = 'four';
        // console.log(four);
        // 将创建节点追加到body元素中
        document.body.appendChild(four);

        var two = document.getElementById('two');
        document.body.insertBefore(four, two);

        var three = document.getElementById('three');
        // document.body.removeChild(three);//删除第三个节点

        document.body.replaceChild(three, two);
    </script>
</body>

</html>